<template>
    <div>
        <Tables 
        :title ='title' 
        :butns = 'butns' 
        :field = 'field' 
        :tableData ='tableData' 
        :curPage ="cur_page"
        :totalNum="total_num" 
        :collectField = "collect_field" 
        :tableNotice ="tableNotice"
        :pageSize='pageSize' 
        :clearSelectItems="selectedItems"
        :rankable ="true"
        @reset="reset"  
        @sentSelectedItems="getSelectedItems" 
        @sentEditData="getEditData"  
        @hostAllowModal= "hostAllowModal"
        @changePageSize = 'changePageSize'
        @rankData = "rankData"
        >
            <div slot="filter">
                <flieImport :type="'selfset'" :title="title" @getData='loadData'></flieImport>
                <search :searchFiled="searchFiled" @searchEvent = "searchData"></search>
            </div>
        </Tables>
        <Modals 
        :id="'modal'" 
        :title ='title' 
        :field ="type=='edit'?field1:field" 
        :collectField = "collect_field"
        :selectItem = "select_item" 
        :status = "status" 
        :errorMsg="errorMsg" 
        :type="type"
        :selectedItems="selectedItems" 
        :editData = "edit_data" 
        @sentErrorMsg = "getErrorMsg"
        @addEvent = 'addData'
        @delEvent = 'delData'
        @editEvent = 'editData'
        ></Modals>
        <Modals 
        :id="'letIn'" 
        :title="$t('safeplot.acessTitle')" 
        :status="allow_status" 
        :errorMsg="allow_errorMsg" 
		:type = "'letIn'"
        @letInEvent="setAllowData"
        >
			<p slot="modal_content" style="font-size: 16px;">{{$t('safeplot.acessAddNotice')}}</p>
		</Modals>
    </div>
</template>
<script>
    import Tables from 'components/common/Tables'
	import flieImport from 'components/common/flieImport'
	import search from 'components/common/search'
    import Modals from 'components/common/Modals'
    import defendService from 'services/defendService'
    import PageData from 'libs/PageData'

    export default {
		components:{
		    Tables,
			flieImport,
			search,
            Modals
	    },
        data() {
            return{
                title:this.$t('safeplot.navBtn4'),
                butns: [
                    {
                        type:'add',
                        name:this.$t('common.addBtn'),
                        icon:'/static/img/add.png',
                        class:'add_btn',
                    },
                    {
                        type:'del',
                        name:this.$t('common.delBtn'),
                        icon:'/static/img/delete.png',
                        class:'del_btn',
                    },
                    {
                        type:'edit',
                        name:this.$t('common.editBtn'),
                        icon:'/static/img/modpic.png',
                        class:'edit_btn',
                    },
                    {
                        type:'other',
                        name:this.$t('safeplot.acessBtn'),
                        icon:'/static/img/letin.png',
                        class:'allowbutn',
                        event:'hostAllowModal'
                    }
                ],
                field: [
                    {
                        type:'checkbox',
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.remarkTableTh1'),
                        name:'gid',          
                        regex:/^\w{1,9}$/,
                        requried:true, 
                        remark:this.$t('safeplot.remarkRemark1'),
                        style:{width:'120px'}  
                    },
                    // {
                    //     type:'UID',
                    //     label:this.$t('safeplot.remarkTableTh2'),
                    //     name:'sort'
                    // },
                    {
                        type:'macinput',
                        label:this.$t('safeplot.remarkTableTh3'),
                        name:'mac',
                        regex: /^[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}$/,
                        requried:true, 
                        remark:this.$t('safeplot.remark1'),  
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.remarkTableTh4'),
                        name:'description',
                        regex:/^[\w\u4e00-\u9fa5]{1,16}$/,
                        requried:true, 
                        remark:this.$t('safeplot.remark1') 
                    }
                ],
                field1: [
                    {
                        type:'checkbox',
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.remarkTableTh1'),
                        name:'gid',          
                        regex:/^\w{1,9}$/,
                        requried:true, 
                        remark:this.$t('safeplot.remarkRemark1'),
                        style:{width:'120px'}  
                    },
                    {
                        type:'none',
                        label:this.$t('safeplot.remarkTableTh2'),
                        name:'sort'
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.remarkTableTh4'),
                        name:'description',
                        regex:/^[\w\u4e00-\u9fa5]{1,16}$/,
                        requried:true, 
                        remark:this.$t('safeplot.remark1') 
                    }
                ],
				searchFiled:[
                    {
                        type:'text',
                        label:this.$t('safeplot.remarkTableTh1'),
                        name:'gid',          
                        regex:/^\w{1,9}$/
                    },
                    {
                        type:'macinput',
                        label:this.$t('safeplot.remarkTableTh3'),
                        name:'mac',
                       regex: /^([0-9A-Fa-f]{2}:){1,6}$/,
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.remarkTableTh4'),
                        name:'desc',
                        regex:/^[\w\u4e00-\u9fa5]{0,16}$/
                    }
                ],
                tableData:[],
                pageSize: [10, 20, 40, 80],
                size:10,
                total_num:1,
                cur_page:1,
                collect_field:'id',
                select_item:[],
                status:"",
                errorMsg:'',
                allowdata:'',
                allow_status:'',
                allow_errorMsg:'',
                type:'',
                selectedItems:[],
                edit_data:{},
                tableNotice:this.$t('safeplot.remarkTableNotice'),
                finddata:{},
                filterData: {mac: '', gid: '', description: ''},
                order: '',
                by: ''
            }
        },
        created() {
            this.reload()
        },
        methods:{
            getErrorMsg(msg) {
                this.errorMsg = msg
            },
            getSelectedItems(selectedItems) {
                this.selectedItems = selectedItems
            },
            getEditData(editdata) {
                this.edit_data = editdata 
            },
            reset(type) {
                this.status = ""
                this.allow_status = ""
                this.errorMsg = ''
                this.type = type
                $('.inputs_wrap .error_foramt').removeClass('error_foramt')
            },
            loadData () {
                this.cur_page = 1
                this.reload()
            },
            addData(params) {
                this.status ='ing'
                let sendStr = `${params.gid}|${params.mac}|${params.description}`
                defendService.addSafePolt(3, {3: sendStr})
                .then((res) => {
					
                    if (res.errcode === 0) {
                        this.status ='ok'
                        this.selectedItems =[]
						let page = params.page?params.page:this.cur_page               
                        let redata ={
                            oper:'find',
                            page:page
                        }
                        redata = Object.assign(this.finddata,redata)
                        this.reload(redata)
                    } else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage
                    }
				})
            },
            delData(params) {
                this.status ='ing'
                defendService.delSafePolt(3, {3: params.ids})
                .then((res) => {
					
                    if (res.errcode === 0) {
                        this.status ='ok'
                        this.selectedItems =[]
                        this.reload()
                    } else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage
                    }
				})
            },
            editData (params) {
                let sendStr = `${params.id}|${params.gid}|${params.description}`
                this.status ='ing'
                defendService.editSafePolt(3, {3: sendStr})
                .then((res) => {
                    if (res.errcode === 0) {
                        this.status ='ok'
                        this.reload()
                    } else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage
                    }
                })
            },
            sreach(params) {
                this.finddata = params
                this.reload(params)
            },
            pageData(params) {
                let redata = Object.assign(this.finddata,params)
                this.reload(redata)
            },
            reload() {
                let params = {
                    page: this.cur_page,
                    row: this.size,
                    order: this.order,
                    by: this.by,
                    gid: this.filterData.gid,
                    mac: this.filterData.mac,
                    description: this.filterData.description
                }
                defendService.getSafePolt(3, params)
                .then((res) => {
					
					if (res.errcode === 0) {
                        let allTableData = res['3'].data.map((item)=>{
                            item.gid = String(item.gid)
                            item.style = item.filter=='1'?"color:#19BE6B":''
                            return item
                        })
						this.total_num = res['3'].count
                        this.tableData =  allTableData
                    }
				})
            },
            changePageSize (nowpage, size) {
                this.cur_page = nowpage
                this.size = size
                this.reload()
            },
            rankData (param) {
                this.order = param.order
                this.by = param.by
                this.reload()
            },
            searchData (params) {
                this.filterData.mac = params.mac ? params.mac : ''
                this.filterData.gid = params.gid ? params.gid : ''
                this.filterData.description = params.desc ? params.desc : ''
                this.reload()
            },
            hostAllowModal(selectedItems) {
				if (selectedItems.length) {
                    let macsArr = []
                    for (let v of selectedItems){
                        for (let value of this.tableData) {
                            if (v === value.id) {
                                macsArr.push(value.mac)
                            }
                        }
                    }
					this.allowdata = macsArr.join(",")
					$('#letIn').modal('show')
				} else {//没有选择删除内容
					this.popoverShow('.allowbutn', this.$t('safeplot.acessNotice'))
				}
			},
            setAllowData() {
                this.allow_status = 'ing'
                defendService.addSafePolt(6, {6: this.allowdata})
                .then((res)=>{
                    if (res.errcode === 0) {
                        this.allow_status='ok'
                        this.reload()
                        $('#letIn').modal('hide')
                    } 
                    else {
                        this.allow_status =''
                        // this.allow_errorMsg = res.errorMessage	
                    }
                })
			},
            popoverShow(ele,content) {//删除弹窗
				$(ele).attr({
					'data-toggle': 'popover',
                    'data-placement':"bottom",
					'data-content': content
				}).popover('show')
				setTimeout(function() {
					$(ele).popover('destroy')
				}, 1500)
			},
        }
    }
</script>